<template>
  <h1 class="m-v-30">列表渲染</h1>
  <h3 class="m-v-10">v-for</h3>
  <div>
    会形成一个局部作用域,也可以在模版字符串中使用解构赋值
    <div v-for="{message} in arr">{{message}}</div>
  </div>
  <h3 class="m-v-10">v-for与对象</h3>
  <div>
    <div v-for="(value,key,index) in arrObj">{{key}}:{{value}}[{{index}}]</div>
  </div>

  <h3 class="m-v-10">v-for中使用范围值，数值从1开始</h3>
  <div>
    <div v-for="i in 10">{{i}}</div>
  </div>

  <h3 class="m-v-10">在template上使用v-for</h3>
  <h3 class="m-v-10">
    v-for 与 v-if
  </h3>
  <div>
    当同事存在与一个结点上时，v-if比v-for优先级更高，一般在外层嵌套一个template来使用v-for
  </div>

  <h3 class="m-v-10">
    通过key管理状态
  </h3>
  <div>
    Vue默认按照<strong>就地更新 </strong>的策略来更新通过v-for渲染的元素列表，当数据想的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保他们在原本指定的索引位置上渲染。
  </div>
  <h3 class="m-v-10">数组变化的侦测</h3>
  <div>
    push,pop,shift,unshift,splice,sort,reserve，vue只能监听到一下数组方法变更并触发相应的更新，
    在计算属性中使用reserse()和sort()的时候务必小心，这两个方法将变更原始数组，计算函数中不应该这么做，请在调用这些方法之前创建一个圆数组的副本
    return [...numbers].reserse()
  </div>

</template>

<script setup>
import { reactive } from "@vue/reactivity";

let arr = reactive([{ message: '第一个' }, { message: '第二个' }])

let arrObj = reactive({
  key: '1',
  label: '第一个',
  value: '一'
})

</script>

<style lang="scss" scoped>
</style>